Herzlich willkommen, live von den JavaScript, Angular, React, HTML und CSS Days. Ich bin Svenja Sorger und neben mir sitzt Nicole Rauch. Hi Nicole, schön, dass du bei unseren Interviews heute mit dabei bist. Nicole ist freiberufliche Softwareentwicklerin und hat umfangreiches Hintergrundwissen in Compilerbau und Verifikationsmethoden und natürlich bist du auch auf einigen Konferenzen unterwegs. Heute bei uns. Und dein Hauptthema ist Redux und du beantwortest uns gleich noch mal ein paar Fragen: Was ist Redux überhaupt? Wie funktioniert es und welche Tools und Techniken kannst du uns so empfehlen? Und vorab aber noch eine Frage. Es kommen ja viele Teilnehmer:innen hierher um sich weiterzubilden. Hast du denn ein Ziel, was du in Zukunft noch lernen möchtest, dich noch interessiert?
Also was mich schon sehr lange beschäftigt und umtreibt und wo ich auch immer noch gerne weiter lernen möchte, ist funktionale Programmierung. Das versuche ich auch immer überall einzuflechten auch zum Beispiel hier im Umfeld von TypeScript, React und Redux. Da immer zu versuchen mehr in diese Richtung zu gehen und das mit reinzubringen. Das hilft mir sehr damit auch gute Software zu entwickeln.
Dann kommen wir zu deinem Workshop bzw. zu den Fragen rund um deinen Workshop. Erklär uns doch ganz kurz: Was ist Redux?
Also bei Redux handelt es sich darum, wie kann ich in meiner React-Applikation oder auch in einer anderen Applikation – also es ist nicht nur auf React beschränkt, sondern ich kann das auch zum Beispiel zusammen mit Angular benutzen oder zusammen mit irgendetwas anderem auch ohne Framework, wenn ich das möchte. Da geht es darum wo tue ich eigentlich meine Daten hin, wenn ich jetzt Daten in meiner Applikation habe. Dieser Redux Store ist eine Möglichkeit diese Daten zentral zu verwalten, überall zur Verfügung zu stellen und ja benutzbar zu machen. Darum geht es dabei.
Gibt es auch grundlegende Funktionsprinzipien und wie sich das in React kombiniert oder einsetzen lässt?
Ja. Das funktioniert so, dass ich aus meiner Komponente heraus, wenn irgendetwas passiert – der Benutzer klickt auf den Button zum Beispiel – dann kann ich dem Redux Store eine Nachricht schicken, eine sogenannte Action, und kann ihm sagen: Hier hat sich was getan, ändere jetzt mal deinen Zustand. Und sobald sich der Redux Store ändert, wird der automatisch an alle React-Komponenten weitergegeben und die werden neu gerendert. Das heißt, die Daten werden aus diesem zentralen Store immer wieder sofort sichtbar gemacht und die ganze React Applikation wird aktualisiert. Und dann kann ich eben wieder darauf warten, dass sich irgendetwas tut und wieder neue Actions abschicken.
Klingt spannend. Gibt das dann auch Techniken oder Tools die den Einsatz mit Redux erleichtern?
Man kann relativ gut, auch ohne jetzt mit riesigen Libraries oder so darauf zu werfen, damit umgehen. Aber natürlich, wenn man das alles wirklich komplett nackig aufschreibt, erzeugt man ziemlich viel Boilerplate Code und dafür gibt es verschiedene Vereinfachungsmethoden, die ich auch heute Nachmittag vorstellen werde, womit man den Boilerplate ein bisschen reduzieren kann. Und Stichwort Libraries: Es gibt jetzt auch was ganz Neues, das heißt oder was heißt ganz neu, von letztem Jahr glaube ich. Das heißt Redux Toolkit und das erlaubt auch alles rund um Redux sehr kurz und knackig aufzuschreiben. Allerdings hat das auch seine eigene Meinung wie Dinge gemacht werden sollten und wenn man mit der Meinung nicht übereinstimmt, dann kann man es halt nicht benutzen. Also Redux selbst ist relativ neutral von der Benutzung her. Man kann es auf viele verschiedene Arten einsetzen. Aber das Redux Toolkit ist – man nennt das auch – ‚opinionated‘. Also es hat seine eigene Meinung und die muss man mögen oder man muss das lassen.
Das klingt gut. Was sind geeignete Teststrategien, die man verwenden kann?
Redux ist größtenteils einfach nur Funktionen, die man aufschreibt und von daher kann man die auch testen mit ganz normalen Mitteln, wie man alle seine Funktionen testen würde. Man braucht also da keine großartige Testing Library oder so etwas. Was ich allerdings auch manchmal für End-to-End Tests einsetze, ist die React Testing Library, womit ich eine React-Komponente, die Redux in sich hat komplett testen und schauen kann, ob alles richtig miteinander verbunden ist. Aber die einzelnen Bestandteile von Redux kann man auch einfach sehr schön testen, wie jede andere Funktion auch.
Stay tuned
Bei neuen Artikel & Eventupdates informiert werden:
Sehr unkompliziert. Super. Dann kommen wir schon zur letzten Frage. Wie lautet dein Take Away für die Besucher:innen nach deinem Workshop hier? Also wenn Teilnehmer:inen deinen Workshop verlassen, was sollen sie sich denken oder wie sollen sie sich dabei fühlen?
Ich möchte sie gerne anregen darüber nachzudenken, wie sie Dinge einsetzen. Nicht einfach blindwütig irgendwas nehmen und kopieren, sondern wirklich versuchen zu verstehen was geht da eigentlich vor sich. Das ist auch so ein bisschen das Thema meines Workshops. Also ich steige nicht ein und sage hier ist dieses dicke Ding und das benutzt man übrigens, indem man so und so die Konfiguration aufschreibt und was innen drin passiert hat euch nicht zu interessieren. Sondern ich erkläre das wirklich von Grund auf und versuche so viel wie möglich zu zeigen, was da eigentlich innen drin vor sich geht, um da eben das Verständnis zu wecken, um auch den Leuten zu helfen, wie sieht das dann gut einsetzen können in Ihrem in ihrem Alltag und in ihrer jeweiligen Umgebung, mit der sie da arbeiten.
Okay. Wenn Ihr nächstes Mal mit dabei sein wollt, dann schaut in die Infobox. Die nächste Edition ist in Berlin. Vielen Dank fürs Interview Nicole.
